<template>
    <div class="empty-container">
        <img class="status-img" :src="ALL_TYPE[type].img||img" alt="">
        <div class="status-title">{{ALL_TYPE[type].title||title}}</div>
        <div class="tips" v-show="ALL_TYPE[type].tips||tips">{{ALL_TYPE[type].tips||tips}}</div>
        <el-Button class="mt-btn" @click="clickChange" v-show="ALL_TYPE[type].button||button">
            {{ALL_TYPE[type].button||button}}
        </el-Button>
    </div>
</template>
<style rel="stylesheet/scss" lang="scss">
    .empty-container {
        margin: 0 auto;
        text-align: center;
        padding: 30px 0;
        box-sizing: border-box;
        .tips {
            margin: 5px 0;
            font-size: 14px;
            color: #999
        }

        .status-title {
            font-size: 16px;
            color: #333;
            margin: 10px 0;
        }

        .status-img {
            width: 100px;
            height: 100px;
        }

        .mt-btn {
            margin: 20px auto;
        }
    }
</style>
<script>
    export default {
        name: "Empty",
        data() {
            return {
                ALL_TYPE: {
                    "NO_DATA": {
                        img: "https://assets.angsi.com/path/v5TUZDp5-t1586948122608-w128-h128.svg",
                        title: "没有数据鸭～",
                        tips: "可以点击下方的按钮刷新",
                        button: "重新获取数据"
                    }
                }
            }
        },
        props: {
            type: {
                type: String,
                default: "NO_DATA"
            },
            button: {
                type: String,
                default: ""
            },
            title: {
                type: String,
                default: ""
            },
            img: {
                type: String,
                default: ""
            },
            tips: {
                type: String,
                default: ""
            }
        },
        // 监听变化
        watch: {},
        // 计算属性
        computed: {},
        // 组件
        components: {},
        created() {
        },
        mounted() {
        },
        methods: {
            clickChange() {
                this.$emit("onClick")
            }
        }
    }
</script>
